<!--
 * @Author: panda
 * @Date: 2022-05-18 09:47
 * @Description: 用户登陆组件
-->
<template>
  <form class="input" style="margin-bottom: 30px">
    <div style="padding: 10px">
      <span style="padding: 0 10px 0 10px">账号&emsp;&emsp;</span>
      <input
        type="text" class="userInput" id="username" placeholder="请输入账号"
        v-model="form.username" autocomplete="username" /><br />
      <span class="tip1"></span>
    </div>
    <el-divider style="margin: 0" />
    <div style="padding: 10px">
      <span style="padding: 0 10px 0 10px">密码&emsp;&emsp;</span>
      <input
        :type="pwdFlag?'password':'text'" class="passInput" placeholder="请输入密码" id="password"
        v-model="form.passwordHash" autocomplete="new-password" />
      <el-icon style=" vertical-align:middle;padding: 0 10px 0 10px" @click="changePwd">
        <component :is="!pwdFlag?showPw:hidePw" />
      </el-icon>
      <el-button type="text" @click="toChangePwd">忘记密码</el-button>
    </div>
  </form>
  <el-button type="primary" plain size="large" style="width: 45%" @click="onRegister">注册</el-button>
  <el-button
    type="primary" size="large" style="float: right; width: 45%" @click="handleLogin"
    :loading="loading">
    登陆
  </el-button>
</template>

<script lang="ts">
import {defineComponent, reactive, ref, shallowRef} from 'vue'
import {ElMessage, ElMessageBox, ElNotification} from "element-plus/es";
import {useUserStore} from '@/store/modules/user';
import {Hide, View} from "@element-plus/icons-vue";
import {router} from "@/router";

export default defineComponent({
  // 传给父组件，是否点击注册按钮，判断是否登陆
  emits: ['isClick','isLogin'],
  setup(props, context) {
    const userStore = useUserStore()
    // 是否隐藏密码显示密码
    const pwdFlag = ref(true)
    // 点击按钮加载
    const loading = ref(false);
    // 眼睛小图标
    const showPw = shallowRef(View)
    // 闭眼小图标
    const hidePw = shallowRef(Hide)
    //用户登陆参数
    const form = reactive({
      username: "",
      passwordHash: ""
    })

    const toChangePwd = () => {
      router.push("changePwd")
    }

    //是否点击注册，点击后，父组件显示注册页面
    const onRegister = () => {
      context.emit('isClick')
    }

    //修改密码 TODO
    const changePwd = () => {
      //密码标示取反即可
      pwdFlag.value = !pwdFlag.value;

    }

    // 表单验证
    const validateForm = () => {
      if (form.username === '' || form.passwordHash === '') {
        ElMessage({
          message: '用户名或密码不可为空',
          type: 'error'
        })
        return;
      } else {
        return [form.username, form.passwordHash];
      }
    }

    // 点击登陆
    async function handleLogin() {
      const data = await validateForm()
      if (!data) return;
      try {
        loading.value = true;
        // 验证是否登陆成功，参数：用户名，密码
        const userInfo = await userStore.login({
          username: form.username,
          passwordHash: form.passwordHash,
        })
        if (userInfo) {
          // 传回登陆成功，隐藏登陆弹窗
          context.emit('isLogin',false)
          ElNotification({
            title: '登陆成功',
            message: `欢迎回来: ${userInfo.username}`,
            type: 'success',
          })
        }
        // else {
        //   await ElMessageBox.alert('登陆失败', '错误提示', {
        //     confirmButtonText: '好的',
        //   })
        // }
      } catch (error) {
        console.log(error)
        await ElMessageBox.alert('登陆失败', '错误提示', {
          confirmButtonText: '好的',
        })
      } finally {
        loading.value = false;
      }
    }

    return {
      onRegister, handleLogin, loading, form, pwdFlag, showPw, hidePw, changePwd,toChangePwd
    }
  }
})
</script>

<style scoped>
.input {
  border: 1px solid lightgray;
  border-radius: 20px;
  /*padding: 10px 10px;*/
  width: 100%;
}

.userInput {
  height: 30px;
  width: 70%;
  outline: none;
  border: none;
}

.passInput {
  height: 30px;
  width: 50%;
  outline: none;
  border: none;
  vertical-align: middle;
}

::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: lightgray;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: lightgray;
  opacity: 1;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: lightgray;
  opacity: 1;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: lightgray;
}
</style>
